<template>
  <div>
    <div class="grid grid-cols-12 gap-5 pt-5 intro-y">
      <div
          class="zoom-in col-span-12 sm:col-span-4 2xl:col-span-3 bg-gradient-to-br from-indigo-600 to-blue-300 rounded-xl p-4 shadow"
          v-if="todayWeather"
      >
        <div class="p-2 mb-2">
          <div class="text-center">
            <div class="leading-tight text-white">
              <font-awesome-icon :icon="['fas', 'location-dot']"/>
              {{ todayWeather?.cityName || "-" }}
            </div>
          </div>
          <div class="text-center">
            <div class="leading-tight text-gray-300">{{ todayWeather?.pickDate }}</div>
          </div>
        </div>
        <div class="p-1 mb-1">
          <div class="flex">
            <div class="flex-1 text-white text-7xl text-center">
              <font-awesome-icon :icon="['fas', 'cloud']"/>
              <!--              {{ todayWeather?.tempDiff}}-->
            </div>
          </div>
        </div>
        <div class="p-2 mb-2">
          <div class="text-center">
            <div class="leading-tight text-white text-lg">{{ todayWeather?.tempMax }}°/{{ todayWeather?.tempMin }}°
            </div>
            <div class="leading-tight text-white text-lg font-bold">{{ todayWeather?.statusName || "-" }}</div>
          </div>
        </div>
        <div class="text-xs text-white mb-1">今天</div>
        <div class="p-2 mb-2 bg-indigo-200 rounded-xl flex bg-opacity-20">
          <div class="flex-1 text-white text-center">
            <div class="text-xs">气温</div>
            <div><i class="bi bi-cloud-fill"></i></div>
            <div class="text-xs">{{ todayWeather?.tempMax }}° - {{ todayWeather?.tempMin }}°</div>
          </div>
          <div class="flex-1 text-white text-center">
            <div class="text-xs">风力</div>
            <div><i class="bi bi-sun"></i></div>
            <div class="text-xs">{{ todayWeather?.windName }}</div>
          </div>
          <div class="flex-1 text-white text-center">
            <div class="text-xs">天气状态</div>
            <div><i class="bi bi-cloud-fill"></i></div>
            <div class="text-xs">{{ todayWeather?.statusName || "-" }}</div>
          </div>
        </div>
      </div>
      <div
          class="zoom-in col-span-12 sm:col-span-4 2xl:col-span-3 bg-gradient-to-br from-indigo-600 to-blue-300 rounded-xl p-4 shadow"
          v-for="(item) in forecastList" :key="item.cityCode"
      >
        <div class="p-2 mb-2">
          <div class="text-center">
            <div class="leading-tight text-white">
              <font-awesome-icon :icon="['fas', 'location-dot']"/>
              {{ item.cityName }}
            </div>
          </div>
          <div class="text-center">
            <div class="leading-tight text-gray-300">{{ item.pickDate }}</div>
          </div>
        </div>
        <div class="p-1 mb-1">
          <div class="flex">
            <div class="flex-1 text-white text-7xl text-center">
              <font-awesome-icon :icon="['fas', 'cloud']"/>
            </div>
          </div>
        </div>
        <div class="p-2 mb-2">
          <div class="text-center">
            <div class="leading-tight text-white text-lg">{{ item.tempMax }}°/{{ item.tempMin }}°</div>
            <div class="leading-tight text-white text-lg font-bold">{{ item.statusName || "-" }}</div>
          </div>
        </div>
        <div class="text-xs text-white mb-1">预测：{{ item.dayLabel }}</div>
        <div class="p-2 mb-2 bg-indigo-200 rounded-xl flex bg-opacity-20">
          <div class="flex-1 text-white text-center">
            <div class="text-xs">气温</div>
            <div><i class="bi bi-cloud-fill"></i></div>
            <div class="text-xs">{{ item.tempMax }}° - {{ item.tempMin }}°</div>
          </div>
          <div class="flex-1 text-white text-center">
            <div class="text-xs">风力</div>
            <div><i class="bi bi-sun"></i></div>
            <div class="text-xs">{{ item.windName }}</div>
          </div>
          <div class="flex-1 text-white text-center">
            <div class="text-xs">天气状态</div>
            <div><i class="bi bi-cloud-fill"></i></div>
            <div class="text-xs">{{ item.statusName || "-" }}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="mt-5 relative box intro-y grid 2xl:grid-cols-3 sm:grid-cols-1 gap-5">
      <div class="sm:col-span-1 2xl:col-span-1">
        <el-calendar v-model="selDate">
          <template #date-cell="{ data }">
            <p :class="['date-cell', data.isSelected ? 'is-selected' : '', hasData(data.day) ? 'has-data' : '']">
              {{ data.day.split('-').slice(1).join('-') }}
              {{ data.isSelected ? '✔️' : '' }}
              <span v-if="hasData(data.day)">🔴</span>
            </p>
          </template>
        </el-calendar>
      </div>
      <div class="sm:col-span-1 2xl:col-span-2">
        <div class="title text-center p-3">新能源预测</div>
        <chart :tableData="tableData"/>
      </div>
    </div>
    <div class="grid-cols-1 mt-5 border-t pt-5 intro-y grid 2xl:grid-cols-11 sm:grid-cols-1 gap-5">
      <div class="box sm:col-span-1 2xl:col-span-3">
        <div
            class="flex items-center px-5 py-5 sm:py-3 border-b border-slate-200/60 dark:border-darkmode-400"
        >
          <h2 class="font-medium text-base mr-auto">申报记录</h2>

        </div>
        <div class="p-3">
          <record/>
        </div>
      </div>
      <DataBox
          title="申报数据"
          :tableData="tableData"
          @tabChange="(index) => handleTabChange('purchase', index)"
      />
    </div>
  </div>
</template>

<script setup>
import {onMounted, ref, watch} from "vue"
import chart from "./chart.vue"
import * as $api from "@/api/api";
import dayjs from "dayjs";
import DataBox from "./dataBox.vue";
import record from "./record.vue";

const selDate = ref(new Date());
const tableData = ref([]);
const todayWeather = ref({
  cityName: "沈阳",
  pickDate: "11-25",
  tempMax: "-12",
  tempMin: "0",
  statusName: "阴",
  windName: "3-4级"

})
const forecastList = ref([
  {
    cityName: "沈阳",
    pickDate: "11-26",
    tempMax: "-12",
    tempMin: "0",
    statusName: "阴",
    windName: "3-4级"
  },
  {
    cityName: "沈阳",
    pickDate: "11-27",
    tempMax: "-12",
    tempMin: "0",
    statusName: "阴",
    windName: "3-4级"
  },
  {
    cityName: "沈阳",
    pickDate: "11-28",
    tempMax: "-12",
    tempMin: "0",
    statusName: "阴",
    windName: "3-4级"
  }
])
const dateData = ref([
  // {"date": "2024-11-25", "hasData": true},
  // {"date": "2024-11-27", "hasData": true}
]);
// 处理 tab 切换事件
const handleTabChange = (type, index) => {
  console.log(`Tab changed: ${type}, Index: ${index}`);
};
// 检查是否有数据
const hasData = (date) => {
  return dateData.value.some((item) => item.date === date);
};
watch(selDate, (newVal) => {
  const date = dayjs(newVal).format("YYYY-MM-DD");
  getData(date);
})
const getData = (date) => {
  $api.NewEnergyOutputQuery({
    unitKey: "",
    userKey: "admin",
    key: "",
    date: date
  }).then(res => {
    console.log("=>(Main.vue:16) res", res);
    tableData.value = res;
  })
}
onMounted(
    () => {
      getData(dayjs(selDate.value).format("YYYY-MM-DD"))
    }
)
</script>

<style lang="scss" scoped>
.import {
  font-size: 20px;
}

.title {
  font-size: 20px;
  color: #555555;
  font-weight: bold;
}
</style>